<template>
	<view>
		<uni-swipe-action>
			<uni-swipe-action-item :left-options="options" :threshold="0" @click="bindClick">
				<view class="content-box" @click="contentClick">
					<text class="content-text">使用数据填充</text>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
	</view>
</template>

<script>
	import uniSwipeAction from "../../../components/uni-swipe-action/components/uni-swipe-action/uni-swipe-action.vue"
	import uniSwipeActionItem from "../../../components/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item.vue"
	export default {
		components: {
			uniSwipeAction,
			uniSwipeActionItem
		},
		data() {
			return {
				options: [{
						text: '取消',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '确认',
						style: {
							backgroundColor: '#F56C6C'
						}
					}
				]
			}
		},
		methods: {
			contentClick() {
				console.log('点击内容');
				uni.showToast({
					title: '点击内容',
					icon: 'none'
				})
			},
			bindClick(e) {
				console.log(e);
				uni.showToast({
					title: `点击了${e.position === 'left' ? '左侧' : '右侧'} ${e.content.text}按钮`,
					icon: 'none'
				});
			},
		}
	}
</script>

<style>

</style>